<template>
	<view class="weichat-home">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="nav-title">微信</view>
			<view class="nav-icons">
				<image class="iconfont" style="width: 30px; height: 30px;" src="/static/images/s.png" mode="aspectFit"></image>
				<image class="iconfont" style="width: 30px; height: 30px;" src="/static/images/add.png" mode="aspectFit"></image> <!-- 修改图片名避免广告拦截 -->
			</view>
		</view>
		<!-- 好友列表 -->
		<view class="chat-list">
			<view v-if="friendsList.length === 0" class="empty-tips">
				<text>暂无好友，请先添加好友</text>
			</view>
			<view @click="toChatPage(item)" class="chat-item" v-for="(item, idx) in friendsList" :key="item.id">
				<image class="avatar" :src="item.avatarUrl" mode="aspectFit" />
				<view class="chat-info">
					<view class="chat-top">
						<text class="chat-name">{{ item.username }}</text>
						<text class="chat-time">{{ item.friend_since || '刚刚' }}</text>
					</view>
					<view class="chat-msg">{{ item.lastMessage || '点击开始聊天' }}</view>
				</view>
				<!-- 好友在线状态指示器 -->
				<view v-if="item.online" class="online-indicator"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from "../../utils/request.js";
	export default {
		data() {
			return {
				friendsList: []
			}
		},
		onLoad() {
			// 页面加载时获取好友列表
			this.loadFriendsList();
		},
		onShow() {
			// 页面显示时刷新好友列表
			console.log('页面显示，刷新好友列表');
			this.loadFriendsList();
		},
		methods: {
			// 加载好友列表
			loadFriendsList() {
				// 尝试从服务器获取好友列表
				request({
					url: '/auth/friends',
					method: 'GET'
				}).then(res => {
					console.log('获取好友列表成功:', res);
					if (res.data && Array.isArray(res.data)) {
						this.friendsList = res.data;
					} else if (Array.isArray(res)) {
						this.friendsList = res;
					}
					console.log('当前好友列表:', this.friendsList);
				}).catch(error => {
					console.error('获取好友列表失败:', error);
				});
			},
			
			
			// 跳转到聊天页面
			toChatPage(friend) {
			  console.log('跳转到与', friend.name, '的聊天页面，好友信息:', friend);
			  
			  // 跳转到chat页面并传递好友信息
			  uni.navigateTo({
			    url: `/pages/chat/chat?friendInfo=${encodeURIComponent(JSON.stringify(friend))}`,
			    success: () => {
			      console.log('跳转成功');
			    },
			    fail: (err) => {
			      console.error('跳转失败:', err);
			    }
			  });
			}
		}
	}
</script>

<style scoped>
	@import '/static/icon/iconfont.css';

	.weichat-home {
		min-height: 100vh;
		background: #f8f8f8;
		position: relative;
	}

	.nav-bar {
		height: 56px;
		box-sizing: border-box;
		background: #ededed;
		display: flex;
		align-items: center;
		justify-content: center;
		position: sticky;
		top: 0;
		z-index: 10;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
	}

	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 20px;
		font-weight: 600;
		color: #222;
		letter-spacing: 2px;
	}

	.nav-icons {
		position: absolute;
		right: 20px;
		top: 0px;
		height: 56px;
		display: flex;
		align-items: center;
	}

	.iconfont {
		font-size: 22px;
		color: #888;
		margin-left: 10px;
	}

	.chat-list {
		padding: 0 0 0 0;
		background: #f8f8f8;
	}

	.empty-tips {
		padding: 50px 0;
		text-align: center;
		color: #999;
	}

	.chat-item {
		display: flex;
		align-items: center;
		padding: 12px 16px;
		background: #fff;
		border-bottom: 1px solid #f2f2f2;
		position: relative;
	}

	.avatar {
		width: 50px;
		height: 50px;
		border-radius: 8px;
		margin-right: 12px;
		background: #eee;
	}

	.chat-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.chat-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.chat-name {
		font-size: 16px;
		color: #222;
		font-weight: 550;
	}

	.chat-time {
		font-size: 13px;
		color: #bbb;
	}

	.chat-msg {
		font-size: 12px;
		color: #888;
		margin-top: 2px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* 在线状态指示器 */
	.online-indicator {
		width: 12px;
		height: 12px;
		background-color: #07c160;
		border-radius: 50%;
		position: absolute;
		right: 20px;
		bottom: 20px;
	}
</style>